<template>
    <div class="container">
        <div class="header">
            <Header :opacity="0.8"></Header>
        </div>
        <div class="content">
            <div>
                <div class="crumbs">首页 > 荣誉样本</div>
                <div class="title">
                    荣誉样本
                </div>
            </div>
            <el-carousel v-if="isSmallScreen" trigger="click" height="110vw">
                <el-carousel-item>
                    <img class="banner" src="/images/sample_phone1.png" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample_phone2.png" alt="" loading="lazy" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample_phone3.png" alt="" loading="lazy" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample_phone4.png" alt="" loading="lazy" />
                </el-carousel-item>
            </el-carousel>
            <el-carousel v-else trigger="click" height="45vw">
                <el-carousel-item>
                    <img class="banner" src="/images/sample1.png" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample2.png" alt="" loading="lazy" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample3.png" alt="" loading="lazy" />
                </el-carousel-item>
                <el-carousel-item>
                    <img class="banner" src="/images/sample4.png" alt="" loading="lazy" />
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="footer">
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'sample',
    data() {
        return {
            isSmallScreen: window.innerWidth < 960, // 初始判断,
            certBig: false,
            certBigImg: '',
        }
    },
    mounted() {
        // 监听窗口尺寸变化
        window.addEventListener('resize', this.checkScreenSize);
    },
    beforeDestroy() {
        // 清理事件监听
        window.removeEventListener('resize', this.checkScreenSize);
    },
    components: {
        Header, Footer
    },
    methods: {
        //监听视口宽度
        checkScreenSize() {
            this.isSmallScreen = window.innerWidth < 960; // 更新状态
        },
    }
}
</script>
<style scoped>
.container {
    width: 100%;
}

.content {
    width: 100%;
    padding-top: 3vw;
    background-image: url('./images/introduced_background-10.png');
    background-size: 100% 100%;
    position: relative;
}

.el-carousel {
    width: 95%;
    margin: 0 auto;
}

.banner {
    width: 100%;
    height: 100%;
}

.crumbs {
    font-size: 18px;
    position: absolute;
    top: 3vw;
    left: 10vw;
}

.title {
    width: 10vw;
    margin: 0 auto;
    margin-top: 5vw;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100% 100%;
    background-image: url('../../assets/images/all_title.png');
}

.footer {
    height: 15vw;
}


/* 手机/小屏幕 */
@media screen and (max-width: 960px) {
    .content {
        padding-top: 8vw;
    }

    .crumbs {
        margin: 3vw;
        margin-left: 10vw;
        font-size: 12px;
    }

    .title img {
        width: 40vw;
    }

    .title {
        width: 40vw;
        margin-bottom: 3vw;
        font-size: 26px;
    }

    .footer {
        height: 30vw;
    }
}
</style>